<template>
  <div>
    <h1>图书标签管理</h1>
    <!-- 搜索标签 -->
    <input v-model="searchQuery" placeholder="搜索标签" @input="filterTags">
    <!-- 新增标签表单 -->
    <form @submit.prevent="addTag">
      <input v-model="newTagName" placeholder="输入新标签名">
      <button type="submit">添加标签</button>
    </form>
    <!-- 标签列表 -->
    <ul>
      <li v-for="tag in filteredTags" :key="tag.id">
        {{ tag.name }}
        <button @click="deleteTag(tag.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      newTagName: '',
      tags: [
        { id: 1, name: '文学' },
        { id: 2, name: '历史' },
        { id: 3, name: '科学' }
      ]
    };
  },
  computed: {
    filteredTags() {
      return this.tags.filter(tag =>
        tag.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    addTag() {
      if (this.newTagName.trim()) {
        const newTag = {
          id: Date.now(),
          name: this.newTagName.trim()
        };
        this.tags.push(newTag);
        this.newTagName = '';
      }
    },
    deleteTag(tagId) {
      this.tags = this.tags.filter(tag => tag.id !== tagId);
    },
    filterTags() {
      // 过滤标签逻辑已在计算属性中实现
    }
  }
};
</script>

<style scoped>
/* 可以添加样式 */
</style>
